{extend name='public/base' /}
{block name="css"}

{/block}
{block name="content"}
<div class="layui-card">
    <div class="layui-card-body">
        <!-- 数据表格 -->
        <table id="dataTable" lay-filter="dataTable"></table>
    </div>
</div>
{/block}
{block name="js"}
<!-- 表格操作列 -->
<script type="text/html" id="tableBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" perm-show="sysMenu:edit" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" perm-show="sysMenu:delete" lay-event="delete">删除</a>
</script>

<!-- js部分 -->
<script>
    layui.use(['layer', 'table', 'notice', 'xnUtil', 'treeTable'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var table = layui.table;
        var admin = layui.admin;
        var form = layui.form;
        var treeTable = layui.treeTable;
        var notice = layui.notice;
        var xnUtil = layui.xnUtil;

        /* 渲染表格 */
        var insTb = treeTable.render({
            elem: '#dataTable',
            url: 'page',
            page: true,
            toolbar: ['<p>',
                '<button lay-event="add" perm-show="sysMenu:add" class="layui-btn layui-btn-sm icon-btn"><i class="layui-icon">&#xe654;</i>添加</button>&nbsp;',
                '<button lay-event="delete" perm-show="sysMenu:delete" class="layui-btn layui-btn-sm layui-btn-danger icon-btn"><i class="layui-icon">&#xe640;</i>删除</button>',
                '</p>'].join(''),
            cellMinWidth: 100,
            tree: {
                iconIndex: 2,
                idName: 'id',
                pidName: 'pid',
                isPidData: true
            },
            cols: [
                [
                    {type: 'checkbox'},
                    {field: 'id', title: 'id', hide:true},
                    {field: 'name', title: '菜单名称', width: 300},
                    {field: 'type', title: '菜单类型', templet: function (d) { return xnUtil.rendDataTableDict(d.type, 'menu_type'); }},
                    {field: 'icon', title: '菜单图标', templet: '<p><i class="layui-icon {{d.icon}}"></i></p>'},
                    {field: 'router', title: '菜单url', width: 200},
                    {field: 'permission', title: '权限标识', width: 200},
                    {field: 'sort', title: '排序'},
                    {field: 'status', title: '状态', templet: function (d) { return xnUtil.rendDataTableDict(d.status, 'common_status'); } },
                    {field: 'createUserName', title: '创建人', hide:true},
                    {field: 'createDate', title: '创建日期', hide:true, sort: true, minWidth: 120},
                    {field: 'updateUserName', title: '更新人', hide:true},
                    {field: 'updateDate', title: '更新日期', hide:true, sort: true, minWidth: 120},
                    {title: '操作', toolbar: '#tableBar', align: 'left', minWidth: 180}
                ]
            ]
        });

        /* 表格工具条点击事件 */
        treeTable.on('tool(dataTable)', function (obj) {
            /* 删除 */
            if (obj.event === 'delete') {
                xnUtil.tabDelete(insTb, obj.data.id);
            }
            /* 编辑 */
            if (obj.event === 'edit') {
                xnUtil.showUpdateModel(insTb, '菜单', obj.data, ['800px', '500px']);
            }
        });

        /* 表格头工具栏点击事件 */
        treeTable.on('toolbar(dataTable)', function (obj) {
            if (obj.event === 'add') { // 添加
                xnUtil.showAddModel(insTb, '菜单', ['800px', '500px']);
            }
            if (obj.event === 'delete') { // 删除
                xnUtil.tabDelete(insTb);
            }
        });
    });
</script>
{/block}